import React,{Component} from 'react'
import './banner.css'
import Swiper from 'swiper'
import HomeCommon from 'pages/home/HomeCommon'


const Item = ( props ) => {
    return(
        <div className="swiper-slide">
            <img src={ props.src }/>
        </div> 
    )
}

class Banner extends Component{


    componentDidMount () {

        this.props.getMonAndBabyBanner()

        // setTimeout ( () => {
        //     this.Swiper = new Swiper (this.mySwiper, {
        //         loop: true, // 循环模式选项
                
        //         // 如果需要分页器
        //         pagination: {
        //           el: '.swiper-pagination',
        //         }
                
        //       }) 
        // },0)
    }

    componentDidUpdate () {

        if (this.Swiper2) return;
        this.Swiper2 = new Swiper (this.mySwiper, {
            loop: true, // 循环模式选项
            
            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
            }
            
          }) 
    }


    renderItem = () => {
        return this.props.mon_and_baby_banner && this.props.mon_and_baby_banner.map( item => {
          return  <Item key={item.id} {...item}/>
        } )
    }

    render () {

        return (
            <div className="swiper-container" ref={ el => this.mySwiper = el}>
                <div className="swiper-wrapper">
                    { this.renderItem()}
                   
                </div>
                <div className="swiper-pagination"></div>
                
                
            </div>
        )
    }
}

export default HomeCommon(Banner)